<template>
	<view class="container">
		<view class="sticky">
			<text class="mr100" @tap="navgetTo('pages/schdule/schdule_detail',Data,'')">行程详情</text><text class="active" @tap="navgetTo('pages/schdule/schdule_team',Data,'')">报名成员</text>
		</view>
		<scroll-view scroll-y="true" scroll-x="false" :style="{height:scrollH+'px'}" refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
		<view class="pt30 pb130" v-if="List.length>0">
			<view class="card-list is-flex p3020 b-dash" v-for="item in List" @tap="navgetTo('pages/schdule/sign_team_detail',item,'')">
				<image :src="item.userDetailDto.headerPic" mode="widthFix"></image>
				<view class="card-item">
					<view class="uni-flex">
						<view class="">{{item.userDetailDto.nickName}}</view>
						<view class="">
							<text class="sign-status uni-success" v-if="item.userDetailDto.sta == 'END'">已取消</text>
							<text class="sign-status uni-warning" v-if="item.userDetailDto.sta == 'PAY'">已支付</text>
							<text class="sign-status uni-default" v-if="item.userDetailDto.sta == 'CANCEL'">已取消</text>
							<text class="sign-status uni-default" v-if="item.userDetailDto.sta == 'OVER'">已评价</text>
						</view>
					</view>
					<view class="color-black mb25">
						<text class="mr50">{{item.userDetailDto.sex}}</text>
						<text>{{item.userDetailDto.age}}</text>
					</view>
					<view class="">
						<text>签名&nbsp;&nbsp;{{item.userDetailDto.signature}}</text>
					</view>
				</view>
			</view>
		<!-- 加载提示 -->
			 <view v-if="isLoading" class="tc mt100 mb100">{{loadMoreText}}</view>
		</view>
		</scroll-view>
		
		<view class="fixed-bottom-wrap">
			<view class="schdule-card uni-flex">
				
			</view>
		</view>
		<!-- 取消行程弹框 -->
		<uni-popup ref="cancelItinerary" type="dialog" class="pop_dialog">
			<uni-popup-dialog :type="msgType" cancelText="暂不取消" confirmText="确认取消" title="取消确认"
				content="取消行程将同步订单并退款是否确认取消" @confirm="cancelItineraryConfirm(Data.id)"
				@close="close('cancelItinerary')">
			</uni-popup-dialog>
		</uni-popup>
		<!-- 直接成团确认弹框 -->
		<uni-popup ref="groupItinerary" type="dialog" class="pop_dialog">
			<uni-popup-dialog :type="msgType" cancelText="暂不成团" confirmText="确认成团" title="成团确认" content="未满足成团人数，是否确认成团"
				@confirm="groupItineraryConfirm(Data.id)" @close="close('groupItinerary')">
			</uni-popup-dialog>
		</uni-popup>
		<!-- 确认出发弹框 -->
		<uni-popup ref="Itinerarying" type="dialog" class="pop_dialog">
			<uni-popup-dialog :type="msgType" cancelText="暂不确认" confirmText="确认出行" title="确认出行"
				content="请盘点成员到齐后，确认开始行程" @confirm="ItineraryingConfirm(Data.id)" @close="close('Itinerarying')">
			</uni-popup-dialog>
		</uni-popup>
		<!-- 确认完成弹框 -->
		<uni-popup ref="closeItinerary" type="dialog" class="pop_dialog">
			<uni-popup-dialog :type="msgType" cancelText="暂不确认" confirmText="确认完成" title="确认完成" content="请确认行程是否已完成"
				@confirm="closeItineraryConfirm(Data.id)" @close="close('closeItinerary')">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import api from '@/common/api/webapi.js'; /*api*/
	// import cityData from '@/common/util/city.js'
	// import uPicker from '@/components/u-picker/u-picker.vue'
	export default {
		components: {
			// uPicker
		},
		data() {
			return {
				scrollH:0,
				isRefreshing:false,
				isLoading:false,
				loadMoreText:"加载中...",
				List:[
					{
					  "id": 0,
					  "userId": 0,
					  "travelLinesId": 0,
					  "travelItineraryId": 0,
					  "orderNo": "",
					  "sta": "",
					  "createDate": "",
					  "userDetailDto": {
						"mobile": "",
						"nickName": "",
						"signature": "",
						"sex": 0,
						"headerPic": "",
						"age": 0,
						"memberAccount": ""
					  }
					}
				],
				Data:{},
				param: {
					page: 1, //当前页
					limit: 10, //每页显示记录数
					PageCount: 0,
					latitude: 25.040609, //默认为昆明市经纬度坐标
					longitude: 102.712251, //默认为昆明市经纬度坐标
					cityCode:0,
					locationCityName:"",
					collectDate:"",
				},
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		watch: {

		},
		onReady() {
			// 获取可滚动区域的高度：视口高度 - tabbar切换卡高度就是剩余的内容可滚动的。
			//如果你使用取消了原生导航栏，记着把你自定义导航栏的高度也减掉哦
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight - uni.upx2px(100)
				}
			})
		},
		onShow() {
			// let userLoginFlag = storageUtil.getStorageData("isLogin");
			// if (userLoginFlag) {
			// 	this.getOrders();
			// }
		},
		onLoad(option) {
			console.log("option",option);
			if(option.LeaderUserId && option.schduleId){
				this.LeaderUserId = option.LeaderUserId;
				this.memberAccount = option.memberAccount;
				this.schduleId = option.schduleId;
				storageUtil.saveStorageData("LeaderUserId",option.LeaderUserId);
				storageUtil.saveStorageData("memberAccount",option.memberAccount);
				storageUtil.saveStorageData("schduleId",option.schduleId);
				this.Data.id = option.schduleId;
				this.getPageList('onPullDownRefresh');
			}else{
				if(option.param){
					let params = JSON.parse(decodeURIComponent(option.param));
					this.Data = params;
					this.getPageList('onPullDownRefresh');
				}
			}
		},
		onShareAppMessage(options) {
			const memberAccount = storageUtil.getUserData('memberAccount');
			console.log("memberAccount",memberAccount);
			let params = {id: this.Data.id, leaderUserId: this.Data.userId};
			console.log(params);
			let path = `/pages/index/schdule_team?share=true&schduleId=${params.id}&LeaderUserId=${params.leaderUserId}&memberAccount=${memberAccount}`;
			console.log("path",path);
			return {
				title: this.Data.itineraryTitle || '行程分享', // 分享标题
				path: path, // 分享的路径，可以是当前页面的路径，也可以是其他页面的路径
				imageUrl: this.Data.travelLinesDetailDto?.coverUrl || 'https://green-leader.oss-cn-hangzhou.aliyuncs.com/common/%E5%8F%8B%E6%AD%A5%E9%A2%86%E9%98%9Flogo.png?Expires=1756883866&OSSAccessKeyId=TMP.3KpSD3VRfU9KihXPDkydNDQFJg3KKHzZSyEBFUWF3pGAnyAiWYGgpjwt9uBjqRXsED9YmkZvTwXEzR2U9GiNpzPcSehURJ&Signature=VDiG2wlWjKtqodT48NqaykugSEM%3D' // 分享的图片链接
			};
			
		},
		onShareTimeline(options) {
			const memberAccount = storageUtil.getUserData('memberAccount');
			console.log("memberAccount",memberAccount);
			let params = {id: this.Data.id, leaderUserId: this.Data.userId};
			console.log(params);
			let path = `/pages/index/schdule_team?share=true&schduleId=${params.id}&LeaderUserId=${params.leaderUserId}&memberAccount=${memberAccount}`;
			console.log("path",path);
			return {
				title: this.Data.itineraryTitle || '行程分享', // 分享标题
				path: path, // 分享的路径，可以是当前页面的路径，也可以是其他页面的路径
				imageUrl: this.Data.travelLinesDetailDto?.coverUrl || 'https://green-leader.oss-cn-hangzhou.aliyuncs.com/common/%E5%8F%8B%E6%AD%A5%E9%A2%86%E9%98%9Flogo.png?Expires=1756883866&OSSAccessKeyId=TMP.3KpSD3VRfU9KihXPDkydNDQFJg3KKHzZSyEBFUWF3pGAnyAiWYGgpjwt9uBjqRXsED9YmkZvTwXEzR2U9GiNpzPcSehURJ&Signature=VDiG2wlWjKtqodT48NqaykugSEM%3D' // 分享的图片链接
			};
		},
		mounted(){
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			// 城市选择器
			bindRegionChange: function(e) {
				this.region = e.detail.value;
			},
			// 星级点击事件
			starChange:function(e){
				this.starValue+1;
			},
			// 页面跳转
			navgetTo(page, param, type) {
				if (param != undefined) {
					type = type || '';
					let data = {
						data: param,
						page: type
					}
					uni.navigateTo({
						url: "/" + page + "?param=" + encodeURI(JSON.stringify(data))
					});
				} else {
					uni.navigateTo({
						url: "/" + page
					});
				}
			},
			onRefresh() {  // 下拉刷新
				this.isRefreshing = true;
				this.param.page = 1;
				this.getPageList('onPullDownRefresh');
			},
			onLoadMore() {  // 上拉加载
				if (this.isLoading) return;
				this.isLoading = true;
				this.param.page = (this.param.page + 1);
				if (this.param.page > this.param.PageCount) {
					this.isLoading = true;
					this.loadMoreText = "--到底啦--"
					return;
				}
				this.getPageList('onReachBottom');
			},
			// 获取分页列表
			getPageList(type) {
				let _this = this;
				let requestData = {
					params: {
						page: _this.param.page, //当前页
						size: _this.param.limit, //每页显示记录数
						travelItineraryId:_this.Data.id,
					}
				}
				api.leaderItineraryMemberList(requestData).then(res => {
					if (res.code === 0) {
						if (res.data.list.length > 0) {
							let pagelist = res.data.list;
							if (type == "onReachBottom") {
								_this.List = _this.List.concat(pagelist)
							} else {
								_this.List = pagelist;
							}
						}else{
							_this.List = [];
						}
					} else {}
				_this.isRefreshing = false;
				_this.loadMoreText = "";
				}).catch(function(){
					_this.isRefreshing = false;
					_this.loadMoreText = "";
				})
			
			},
			// 取消行程确认
			cancelItineraryConfirm(ID) {
				api.itineraryCancel({
					params: {
						travelItineraryId: ID,
					}
				}).then(res => {
					if (res.code === 0) {
						this.$refs.cancelItinerary.close();
						uni.switchTab({
							url: '/pages/schdule/schdule',
							success() {
								var page = getCurrentPages().pop();
								if (page == undefined || page == null) return;
								page.onLoad();
							}
						});
					} else {}
				}).catch()
			},
			// 直接成团确认
			groupItineraryConfirm(ID) {
				api.itineraryct({
					params: {
						travelItineraryId: ID,
					}
				}).then(res => {
					if (res.code === 0) {
						this.$refs.groupItinerary.close();
						uni.switchTab({
							url: '/pages/schdule/schdule',
							success() {
								var page = getCurrentPages().pop();
								if (page == undefined || page == null) return;
								page.onLoad();
							}
						});
					} else {}
				}).catch()
			},
			//确认出发确认
			ItineraryingConfirm(ID) {
				api.itinerarystart({
					params: {
						travelItineraryId: ID,
					}
				}).then(res => {
					if (res.code === 0) {
						this.$refs.Itinerarying.close();
						uni.switchTab({
							url: '/pages/schdule/schdule',
							success() {
								var page = getCurrentPages().pop();
								if (page == undefined || page == null) return;
								page.onLoad();
							}
						});
					} else {}
				}).catch()
			},
			// 确认完成确认
			closeItineraryConfirm(ID) {
				api.itineraryfinish({
					params: {
						travelItineraryId: ID,
					}
				}).then(res => {
					if (res.code === 0) {
						this.$refs.closeItinerary.close();
						uni.switchTab({
							url: '/pages/schdule/schdule',
							success() {
								var page = getCurrentPages().pop();
								if (page == undefined || page == null) return;
								page.onLoad();
							}
						});
					} else {}
				}).catch()
			},
			open(ele) {
				if (ele == "cancelItinerary") {
					this.$refs.cancelItinerary.open("center");
				} else if (ele == "groupItinerary") {
					this.$refs.groupItinerary.open("center");
				} else if (ele == "Itinerarying") {
					this.$refs.Itinerarying.open("center");
				} else if (ele == "closeItinerary") {
					this.$refs.closeItinerary.open("center");
				}
			},
			close(ele) {
				if (ele == "cancelItinerary") {
					this.$refs.cancelItinerary.close();
				} else if (ele == "groupItinerary") {
					this.$refs.groupItinerary.close();
				} else if (ele == "Itinerarying") {
					this.$refs.Itinerarying.close();
				} else if (ele == "closeItinerary") {
					this.$refs.closeItinerary.close();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;
	}

	.index-swiper {
		width: 100%;
		height: 670rpx;
	}

	.index-swiper image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	
	.bottom-wrap{
		position: relative;
		top: -60rpx;
	}
	
	.is-flex{
		display: flex;
		align-items: center;
	}
	
	.xf-wrap {
		position: relative;
		top: -60rpx;
		overflow: hidden;
	}

	.box-shadow {
		box-shadow: 2rpx 2px 2rpx $uni-text-color-grey8;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.xf-wrap input {
		font-weight: bold;
	}

	.uni-flex {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.uni-row {
		flex-direction: row;
	}
	.sticky {
		height: 85rpx;
		line-height: 85rpx;
		background-color: #ffffff;
		width: 100%;
		color: #888;
		position: sticky;
		top: -1rpx;
		left: 0;
		right: 0;
		z-index: 999;
		text-align: center;
	}

	.sticky text {
		color: $uni-text-color-light-blue;
		font-weight: bold;
		padding: 10rpx 15rpx;
	}
	.sticky text.active{
		color: $uni-text-color-blue;
		border-bottom: 2px solid $uni-text-color-blue;
	}
	.pb130{
		padding-bottom: calc( 130rpx + max(env(safe-area-inset-bottom),20px));
	}
	.share-reward{
		.color-black{
			display: block;
			margin-bottom: 20rpx;
		}
		.is-flex{
			align-items: flex-start;
		}
		.color-gray{
			line-height: 1.8;
			text-align: justify;
			margin-left: 20rpx;
		}
	}
	.fixed-bottom-wrap {
		position: fixed;
		z-index: 111;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		width: 100%;
		height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
		line-height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
	}
	.schdule-card{
		height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
		line-height: 60rpx;
		border-top: 1px solid #f8f8f8;
		padding-bottom: max(env(safe-area-inset-bottom),20px);
		.flex-item{
			width: 25%;
			text-align: center;
			line-height: 40rpx;
			padding-top: 10rpx;
		}
		.flex-item:last-child{
			width: 50%;
			padding-top: 0;
		}
		text{
			display: block;
		}
		.sign{
			height: 100%;
			color: $uni-text-color-white;
			background-color: $uni-text-color-green;
			font-size: 32rpx;
			line-height: 100%;
			text{
				line-height: 100rpx;
			}
		}
	}
	
</style>